import {Form} from 'antd';
import type {FormInstance} from 'antd/lib/form';
import React, {useEffect} from 'react';

const EditableContext = React.createContext<FormInstance<any> | null>(null);

export default function EditableRow(props: any) {
  const {onSaveForm, record, onSaveValue, ...res} = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue(record);
    onSaveForm?.(record.key, form);
  }, []);

  return (
    <Form
      form={form}
      component={false}
    >
      <EditableContext.Provider value={form}>
        <tr {...res} />
      </EditableContext.Provider>
    </Form>
  );
}
